<div class="container"> 
    
  <h1 class="page_head">Category Page</h1>
  
  <form>
      <label>Search</label>
      <input type="search" id="search" size="100" autofocus/>
  </form>

  <ul id="arrayView">
      
  </ul>
  
</div>

<script>
    var arr = <?php echo $this->list?>;
    
    function setList( viewArr){
        var str = "";
        
        $('#arrayView').empty();
        
        if ( viewArr.length > 0) {
            for ( var i = 0; i < viewArr.length; i++)
                str += '<li><a href="<?php echo URL; ?>category/view/'+
                       viewArr[i].id+'" target="_self">'+viewArr[i].name+'</a></li>';
        }
        else {
            str = "no match found";
        }
        
        
        $('#arrayView').append(str);
    }

    $(document).ready(function() {
        setList( arr);
    });

    $('#search').keyup(function() {
        var tmpArr = new Array();
        var value = $('#search').val();
        var index = 0;
        
        for ( var i = 0; i < arr.length; i++)
        {
            if ( arr[i].name.indexOf(value) != -1)
                tmpArr[index++] = arr[i];
        }
        
        setList( tmpArr);
        
        return false;
    });
</script>
